<template>
    <div>
        <div class="container">
            <div class="form-box" >
                <el-form :label-width="formLabelWidth">
                    <el-form-item label="ID" v-if="false">
                        <el-input v-model="attributeForm.id" class="handle-input mr10" />
                    </el-form-item>
                    <el-form-item label="所属类目" >
                        <span>{{selectValueName}}</span>
                        <el-input v-model="attributeForm.classifyId" class="handle-input mr10" v-if="false" />
                    </el-form-item>
                    <el-form-item label="商品属性名称">
                        <el-input v-model="attributeForm.attrName" class="handle-input mr10" />
                    </el-form-item>
                    <el-form-item label="数据录入方式">
                        <el-input v-model="attributeForm.inputType" class="handle-input mr10" v-if="false"/>
                        <el-input v-model="attributeForm.strInputType" placeholder="数据录入方式" class="handle-input mr10" readonly clearable @click="vDictDialogVisible = true"/>
                    </el-form-item>
                    <el-form-item label="数据表格" v-if="attributeForm.inputType === '11010002'">
                        <el-button @click="func_openAttributeValuePop">配置表格</el-button>
                        <el-table :data="attributeForm.productAttributeValues" border class="table" style="margin-top:15px;width:650px" header-cell-class-name="table-header">
                            <el-table-column label="index" width="70" align="center">
                                <template #default="scope">
                                {{scope.$index +1 }}
                                </template>
                            </el-table-column>
                            <el-table-column prop="attrValue" label="属性选项">
                                <template #default="scope">
                                    <el-input v-model="scope.row.attrValue" class="handle-input mr10" />
                                </template>
                            </el-table-column>
                            <el-table-column prop="sort" label="排序">
                                <template #default="scope">
                                    <el-input v-model="scope.row.sort" class="handle-input mr10"/>
                                    <!-- <el-input-number v-model="scope.row.sort" :min="1" :max="10" size="small"/> -->
                                </template>
                            </el-table-column>
                            <el-table-column label="操作" width="150px">
                                <template #default="scope">
                                    <el-button type="text" class="red" @click="func_delvAttributeValueData(scope.$index, scope.row.id)"> <i class="el-icon-delete" />删除</el-button>
                                </template>
                            </el-table-column>
                        </el-table>
                    </el-form-item>
                    <el-form-item label="展示方式">
                        <el-input v-model="attributeForm.sortType" class="handle-input mr10" v-if="false" />
                        <el-select v-model="attributeForm.sortType" placeholder="请选择">
                            <el-option v-for="item in sortTypeOptions" :key="item.value" :label="item.label" :value="item.value" />
                        </el-select>
                    </el-form-item>
                    <el-form-item label="排序">
                        <el-input-number v-model="attributeForm.sortKey" :min="1" :max="10" size="small" class="mr10" />
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" @click="func_onSubmit">保存数据</el-button>
                        <el-button @click="func_onClose">关闭</el-button>
                    </el-form-item>
                </el-form>
            </div>
        </div>
        <!-- 引用字典数据插件 -->
        <el-dialog title="数据录入方式" v-model="vDictDialogVisible" width="55%" :close-on-click-modal="false">
            <div class="handle-box">
                <VDict v-bind:selectValue="66" @dictData="func_loadvDictData" />
            </div>
        </el-dialog>
        <el-dialog title="选择数据表格" v-model="vAttributeValueTableVisible" width="55%" :close-on-click-modal="false">
            <VProductAttributeValue v-bind:selectValue="attributeValueTableParam" @attributeValueData="func_loadvAttributeValueData" />
        </el-dialog>
    </div>
</template>

<script>
import { onMounted, ref, reactive, toRefs, watch } from 'vue';
import { ElMessage, ElMessageBox } from "element-plus";
import { useRouter,useRoute } from 'vue-router';
import { addAttribute } from "../../../../api/hairmanager/productAttribute";
import { NO_DATA_SELECT_ERROR, SUCCESS_ADDDATA_DIALOG_MESSAGE, SUCCESS_DELDATA_DIALOG_MESSAGE, SUCCESS_EDITDATA_DIALOG_MESSAGE, formLabelWidth, } from "../../../../api/CommonErrorMessage.js";

import VProductAttributeValue from "./attributeFormPop.vue";
import VDict from "../../components/dict.vue";
export default {
    name: "attributeForm",
    components: {VDict, VProductAttributeValue},
  	props:{
		selectValue: Object
	},
	emits: ["attributeData"],
    setup(props, cex){
		onMounted(() => {
		});
        const router = useRouter();
		const route = useRoute();

        const formLabelWidth = ref("170px");
        const selectValueId = ref(0);
        const selectValueName = ref("");
        const classifyValue = ref("");
        const sort = ref(0);
        const sortTypeOptions = [
            {
                value: "num",
                label: "数字",
            },
            {
                value: "char",
                label: "文字",
            }
        ];
        /**
         * @name 定义业务表单
         */
        const getFormData = () => {
            return {
                id: 0,
                attrName: "",
                classifyId: 0,
                strInputType: "",
                inputType: "",
                sortType: "",
                sortKey: 0,
                productAttributeValues: [],
                editFlg: 0,
            }
        };
        /**
         * @name 表单初始化
         */
        const resetFormData = () => {
            Object.assign(attributeForm, getFormData());
        };
        /**
         * @name 映射表单
         */
        const attributeForm = reactive(getFormData());
        const attributeValueTableParam = reactive({
            valueSaveFlg: true,
            selectValueAttrId: 0,
        });
		// =========================================================================================
        const func_onload = () => {
            
        };
        // 提交
        const func_onSubmit = () => {
            addAttribute(attributeForm).then((res) => {
                if(res.code != 200) {
                    ElMessage.error(res.message);
                } else {
                    ElMessage.success(SUCCESS_ADDDATA_DIALOG_MESSAGE);
                    cex.emit('attributeData', {state: 1, data: []});
                }
            });
        };
        // 重置
        const func_onClose = () => {
            cex.emit('attributeData', {state: 1, data: []});
            // cex.emit('attributeData', {state: 99, data: []});
        };
        const func_saveData = () => {
            saveProductAttributeValue(attributeForm).then((res) => {
                if(res.code != 200) {
                    ElMessage.error(res.message);
                } else {
                    ElMessage.success(SUCCESS_ADDDATA_DIALOG_MESSAGE);
                }
            });
        };
        // 引用插件数据插件业务处理========================================================================================= START
        const vAttributeValueTableVisible = ref(false);
        const func_openAttributeValuePop = () => {
            attributeValueTableParam['valueSaveFlg'] = false;
            vAttributeValueTableVisible.value= true;
        };
        const func_loadvAttributeValueData = (v) => {
            if(v['state'] === 1){
                attributeForm['productAttributeValues'] = v['data'];
                vAttributeValueTableVisible.value= false;
            } else {
                vAttributeValueTableVisible.value= false;
            }
        };
        const func_delvAttributeValueData = (index ,id) => {
            attributeForm['productAttributeValues'].splice(index, 1);
        };
        // 引用插件数据插件业务处理========================================================================================= END
        // 引用字典数据插件业务处理========================================================================================= START
        const vDictDialogVisible = ref(false);
        /**
         * @name 字典数据插件引用对话框
         */
        const func_drawerBundDialog = () => {
            vDictDialogVisible.value = true;
        };
        const func_loadvDictData = (v) => {
            attributeForm.inputType = v.dicCode;
            attributeForm.strInputType = v.dicName;
            vDictDialogVisible.value = false;
        };
        const load = ref(false);
        // 引用字典数据插件业务处理========================================================================================= END
        watch(() => props.selectValue, (val) => {
            if(val['load'] === false) {
                resetFormData();
            }
            selectValueId.value = props.selectValue['classifyId'];
            selectValueName.value = props.selectValue['classifyName'];
            attributeForm["classifyId"] = selectValueId.value;
        },{deep: true, immediate: true});
        return {
            // 系统变量
            formLabelWidth, selectValueId, selectValueName, sortTypeOptions, 
			classifyValue, attributeForm, 
            // 主业务调用方法
            func_onload, func_onSubmit, func_onClose, func_saveData,
            // 插件业务调用方法
            attributeValueTableParam, vAttributeValueTableVisible, func_openAttributeValuePop, func_loadvAttributeValueData, func_delvAttributeValueData,
            // 数据字典参数变量
            vDictDialogVisible, func_loadvDictData,
        };
    },
};
</script>
<style scoped>
.handle-box {
    margin-bottom: 20px;
}

.handle-select {
    width: 150px;
}

.handle-input {
    width: 150px;
    display: inline-block;
}
.table {
    width: 100%;
    font-size: 14px;
}
.red {
    color: #ff0000;
}
.mr10 {
    margin-right: 10px;
}
.table-td-thumb {
    display: block;
    margin: auto;
    width: 40px;
    height: 40px;
}
</style>